import React, {Component} from 'react';
import PropTypes from 'prop-types'
import './bodyItem.scss'

//todoList中间列表的模板
class BodyItem extends Component {
    static propTypes = {
        info: PropTypes.object.isRequired,
        editStatus: PropTypes.func.isRequired,
        delItem: PropTypes.func.isRequired
    }
    state = {
        isHove: false,
        ddd: 1
    }

    editHove(status) {
        return () => {
            return this.setState({
                isHove: status
            })
        }
    }

    //删除任务
    delItem = () => {
        if (confirm('确定要删除?'))
            this.props.delItem([this.props.info.id])
    }

    render() {
        const {title, status} = this.props.info;
        return (
            <div className="body-item-body" onMouseOut={this.editHove(false)} onMouseOver={this.editHove(true)}>
                <span><
                    input
                    type="checkbox"
                    defaultChecked={status}
                    checked={status}
                    onChange={this.onChange}

                />
                </span>
                <span className={"title"}>{title}</span>
                <span style={{display: this.state.isHove ? 'block' : 'none'}}>
                    <a onClick={this.delItem} className="shan-chu">删除</a>
                </span>
            </div>
        );
    }

    onChange = (e) => {
        const {id} = this.props.info;
        this.props.editStatus([id], e.target.checked)
    }
}

export default BodyItem;